<template>
  <div id="app">
    <div class="fun">
      <el-switch
        v-model="switchVal"
        active-color="#2c2c2c"
        inactive-color="#e8e4e4"
        @change="switchChange">
      </el-switch>
    </div>
    <el-menu 
      :default-active="activeIndex" 
      mode="horizontal"
      text-color="#fff"
      background-color="#545c64"
      active-text-color="#ffd04b" 
      @select="handleSelect">
      <el-menu-item index="/home">
        主页
      </el-menu-item>
      <el-submenu index="1">
        <template slot="title">图表</template>
        <el-menu-item index="/charts">折线图</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">表格</template>
        <el-menu-item index="/table">普通表格</el-menu-item>
        <el-menu-item index="/dynamicTable">动态表格</el-menu-item>
        <!-- <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu> -->
      </el-submenu>
    </el-menu>
    <!--  -->
    <keep-alive :include="keepAliveInclude">
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  data(){
    return {
      switchVal: false,
      activeIndex: '/home',
    }
  },
  computed:{
    ...mapGetters([
      'keepAliveInclude',
    ])
  },
  methods:{
    switchChange(val){
      if(val){
        window.document.documentElement.setAttribute('data-theme', "dark");
      }else{
        window.document.documentElement.setAttribute('data-theme', "light");
      }
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.$router.push(key)
    }
  },
  mounted(){
    this.switchChange(this.switchVal);
  }
}
</script>

<style lang="scss">
@import "@/assets/css/_handle.scss";
#app {
  height: 100vh;
  text-align: center;
  @include background_color('bg-color');
  .fun{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 5px;
    box-sizing: border-box;
  }
}
</style>
